<%@page import="com.wlw.entity.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	User user = (User)request.getSession().getAttribute("user");
	String province = "";
	String city = "";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>foreground/"/>
<meta http-equiv="Content-Type" content="text/html;" />
<title>省份详情 - 开溜儿网</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="js/flash.js"></script>
<script type="text/javascript" src="js/int.js"></script>
<script src="js/CJL.0.1.min.js"></script>
<script src="js/AlertBox.js"></script>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="icon" href="animated_favicon.gif" type="image/gif">
<link href="nav.css" rel="stylesheet" type="text/css"/>
<script language="javascript" src="common.js"></script>
<script language="javascript" src="nav.js"></script>
<style>
#clazz_area {
	width: 100%;
	height: 300px;
	border: 1px solid red;
}
</style>
<style type="text/css">
	table tr {padding:20px;}
	table tr td{padding:10px;}
</style>

</head>
<body style="margin:0 auto;">
	<div id="topBar">
		<div class="wrapper">
			<div class="l">游客您好，欢迎访问开溜儿旅游网！</div>
			<div class="r1" style="float:right; margin:3px; margin-left:30px">
			<%
				if(user==null){
			 %>
			<form action="<%=path%>/user/login.do" method="post" style="margin:0px;display:inline;">
				用户名:<input name="uname" class="input" placeholder="会员账号" style="height: 21px;margin-bottom: 4px" onfocus="this.placeholder=''" onblur="if(this.value=='')this.placeholder='会员账号';" type="text"/>
				密码:<input name="pwd" class="input" placeholder="请输入密码" style="height: 21px;margin-bottom: 4px" onfocus="this.placeholder=''" onblur="if(this.value=='')this.placeholder='请入输密码';" type="password"/>
				<input value="立即登录" style="background-color:#FFFFFF;border: 0px none;width: 72px;height: 28px;margin-top: -4px;color: red;font-size: 14px;font-weight: bold;cursor: pointer;"
						type="submit"/>
			</form>
					<a href="#" style="color:#84C1FF">忘记了密码？</a>
						<input value="注 册" id="idCenter" 
						style="background-color:#FFFFFF;border: 0px none;width: 72px;height: 28px;margin-top: -4px;color: red;font-size: 14px;font-weight: bold;cursor: pointer;"
						type="submit">
							<style>
							.lightbox{width:350px;height:360px;background-color:#FFF;border:1px solid #0051c1;line-height:20px;display:none; margin:0;}
							.lightbox dt{background-color: #0051c1;padding:5px;}
							.lightbox dd{ padding:20px; margin:0;}
							
						</style>
							
						<br />
						<dl id="idBox" class="lightbox" style="top:10%;left:5%;background-color: #fff;">
							<dt>
								<b>欢迎您注册开溜儿网！</b>
								<input style="float:right; background-color: #0051c1;border: 0px red solid;" type="button" value="X" id="idBoxClose"/>
							</dt>
						<center>
							<dd>
								<form action="<%=path%>/user/register.do" method="post" enctype="multipart/form-data">
									<table>
										<tr style="padding:30px;">
											<td>用户名：</td>
											<td>
												<input type="hidden" name="id" value="${u.id}"/>
												<input type="text" name="uname" value="${u.uname}" id="idBoxTxt">
											</td>
										</tr>
										<tr>
											<td>密&nbsp;&nbsp;&nbsp;码：</td>
											<td><input type="password"  name="pwd" value="" id="idBoxTxt">
											</td>
										</tr>
										<tr>
											<td>确认密码：</td>
											<td><input type="password" value="" id="idBoxTxt">
											</td>
										</tr>
										<tr>
											<td>E-mail：</td>
											<td><input type="text" name="email" value="${u.email}" id="idBoxTxt">
											</td>
										</tr>
										<tr>
											<td>电&nbsp;&nbsp;&nbsp;话：</td>
											<td><input type="text"  name="telPhone" value="${u.telPhone}"
												id="idBoxTxt">
											</td>
										</tr>
										<tr>
											<td>
												<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
												<input style="width: 50px;height: 30px;" type="submit" value=" 确&nbsp;&nbsp;定 "/><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
											</td>
											<td>
												<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
												<input style="width: 50px;height: 30px;" type="reset" value=" 重置 "/><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
											</td>
										</tr>
									</table>
									
								</form>
							</dd>
						</center>
						</dl>
						<script>
							(function(){
							
							var ab = new AlertBox("idBox"), lock = false;
							
							//锁定键盘
							function lockup(e){ e.preventDefault(); }
							//高亮层不锁定
							function lockout(e){ e.stopPropagation(); }
							
							ab.onShow = function(){
								$$("idBoxTxt").select();
								if ( lock ) {
									$$E.addEvent( document, "keydown", lockup );
									$$E.addEvent( this.box, "keydown", lockout );
									OverLay.show();
								}
							}
							ab.onClose = function(){
								$$("idMsg").innerHTML = $$("idBoxTxt").value;
								$$E.removeEvent( document, "keydown", lockup );
								$$E.removeEvent( this.box, "keydown", lockout );
								OverLay.close();
							}
							
							$$("idBoxClose").onclick = function(){ ab.close(); }
							
							$$("idCenter").onclick = function(){
								ab.center = true;
								ab.show();
							}
							})()
						</script> 
			<%}else{%>
				<h4>欢迎您 ，<a style="color:#fff;" href="<%=path%>/user/myInfo.do">${user.uname}</a>
					<form action="<%=path%>/user/logout.do" style="display: inline;margin: 0px;">
						<input value="注销" id="idCenter" 
								style="background-color:#FFFFFF;border: 0px none;width: 72px;height: 28px;margin-top: -4px;color: red;font-size: 14px;font-weight: bold;cursor: pointer;"
								type="submit">
					</form>
				</h4>
				<%} %>
			</div>
		</div>
	</div>

	<div id="header">
		<div class="wrapper">
			<div class="logo">
				<a href="<%=path%>"><img src="images/logo.png">
				</a>
			</div>
				<div class="search">
					<dl>
						<dd>
							<a id="search_type1"
								onclick="select_search_type(1);return false;" href="#"
								class="current">景点</a>
						</dd>
						<dd>
							<a id="search_type2"
								onclick="select_search_type(2);return false;" href="#">城市</a>
						</dd>
						<dd>
							<a id="search_type3"
								onclick="select_search_type(3);return false;" href="#">问答</a>
						</dd>
					</dl>
					<div>
						<input id="s" type="text" style="height: 35px;padding-left: 25px;" name="search"
							onfocus="if(this.value=='这是一个神奇的搜索'){this.value='';}"
							value="这是一个神奇的搜索" style="padding: 10;"/><input
							name="search_type" id="search_type" value="1" type="hidden" />
							<script type="text/javascript">
								function search(){
									var s = document.getElementById("s").value;
									var type = document.getElementById('search_type').value;
									var uri = encodeURI(encodeURI(s));
									window.location.href='${pageContext.request.contextPath}/user/search.do?search='+uri+'&search_type='+type;
								}
							</script>
							
						<button type="submit"  onclick="search();">搜索</button>
					</div>
				</div>
		</div>
	</div>

	<script type="text/javascript">
		function select_search_type(n) {
			document.getElementById('search_type1').className = '';
			document.getElementById('search_type2').className = '';
			document.getElementById('search_type3').className = '';
			document.getElementById('search_type' + n).className = 'current';
			document.getElementById('search_type').value = n;
		}
	</script>

	<div id="nav">
		<dl>
			<div>
				<label id="location"></label>
			   <script type="text/javascript">
			   //通过新浪地址库获得地址。
			   
					document.getElementById("location").innerHTML="您当前的位置："+remote_ip_info["province"]+"省"+"|"+remote_ip_info["city"] + "市";
			   </script>
			</div>
			<dd>
				<a href="<%=path%>/travalNoteManage/listTravalNote.do" target="_blank" class="a2">全部游记</a>
			</dd>
			<dd>
				<a href="<%=path%>/foreground/fabiaoyoujis.jsp" target="_blank" class="a3">发表游记</a>
			</dd>
		</dl>
		<ul>
			<li><a href="<%=path%>/" class="a1">首页</a>
			</li>
			<li><a href="<%=path%>/travalNoteManage/traval.do" class="a2">旅游攻略</a>
			</li>
			<li><a href="<%=path%>/city/list.do" class="a4">目的地</a>
			</li>
			<li><a href="<%=path%>/city/laLongutitude.do" class="a6">地图</a>
			</li>
			<li><a href="<%=path%>/qaManage/quest.do?pageNo=1" class="a5">问答</a>
			</li>
			<li><a href="<%=path%>/user/myInfo.do" class="a7">个人中心</a>
			</li>
		</ul>
	</div>
<div id="main">
	<div id="huanDeng" style="float:left;display: inline;;">
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,img {
	border: 0;
}

body {
	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/*焦点图*/
.mod18 {
	width: 680px;
	height: 406px;
	margin: 20px auto;
	position: relative;
	background: #f7f7f7;
}

.mod18 .btn {
	position: absolute;
	width: 15px;
	height: 70px;
	top: 336px;
	cursor: pointer;
	z-index: 99;
	font-size: 50px;
	font-weight: bold;
}

.mod18 .prev {
	left: 0;
	background: url(images/prevBtn.png) no-repeat;
}

.mod18 #prevTop,.mod18 #nextTop {
	top: 213px;
	width: 46px;
	height: 48px;
}

.mod18 #prevTop {
	background: url(images/prevBtnTop.png) 0 0 no-repeat;
}

.mod18 #nextTop {
	background: url(images/nextBtnTop.png) 0 0 no-repeat;
}

.mod18 .next {
	right: 0;
	background: url(images/nextBtn.png) no-repeat;
}

.mod18 li {
	float: left;
}

.mod18 .cf li {
	position: relative;
	color: #fff;
}

.mod18 .cf a {
	display: block;
	width: 680px;
	height: 330px;
	position: absolute;
	color: #fff;
}

.mod18 .cf li span {
	display: block;
	width: 640px;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px 20px;
	line-height: 22px;
	text-align: left;
	background: rgba(0, 0, 0, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(  GradientType=  0,
		startColorstr=  "#60000000", endColorstr=  "#60000000" );
}

.mod18 .picBox {
	height: 330px;
	position: relative;
	overflow: hidden;
}

.mod18 .picBox ul {
	height: 330px;
	position: absolute;
}

.mod18 .picBox li {
	width: 680px;
	height: 330px;
}

.mod18 .listBox {
	width: 642px;
	height: 100px;
	margin: 0 auto;
	position: relative;
	padding: 6px 0 10px;
	overflow: hidden;
}

.mod18 .listBox ul {
	height: 100px;
	position: absolute;
}

.mod18 .listBox li {
	width: 129px;
	height: 70px;
	cursor: pointer;
	position: relative;
}

.mod18 .listBox li i {
	display: none;
}

.mod18 .listBox li a {
	display: block;
	width: 124px;
	height: 70px;
}

.mod18 .listBox li img {
	width: 124px;
	height: 70px;
}

.mod18 .listBox .on img {
	width: 118px;
	height: 64px;
	border: 3px solid #ff6600;
}

.mod18 .listBox .on i {
	display: block;
}
</style>

				<div class="mod18">
					<span id="prev" class="btn prev"></span> <span id="next"
						class="btn next"></span> <span id="prevTop" class="btn prev"></span>
					<span id="nextTop" class="btn next"></span>
					<div id="picBox" class="picBox">
						<ul class="cf">
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/1.jpg" alt="" />
							</a> <span>落霞与孤鹜齐飞，秋水共长天一色。</span></li>
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/2.jpg" alt="" />
							</a> <span>枯藤老树、残阳如血。</span></li>
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/3.jpg" alt="" />
							</a> <span>此情可待成追忆，只是当时已惘然。</span></li>
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/4.jpg" alt="" />
							</a> <span>停车坐爱枫林晚，霜叶红于二月花。</span></li>
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/5.jpg" alt="" />
							</a> <span>床前明月光、低头思故乡。</span></li>
							<li><a href="#" target="_blank"><img
									width="680" height="380" src="images/6.jpg" alt="" />
							</a> <span>采菊东篱下，悠然见南山。</span></li>
						</ul>
					</div>

					<div id="listBox" class="listBox">
						<ul class="cf">
							<li class="on"><i class="arr2"></i><img width="118"
								height="64" src="images/11.jpg" alt="秋水" />
							</li>
							<li><i class="arr2"></i><img width="118" height="64"
								src="images/22.jpg" alt="枯藤" />
							</li>
							<li><i class="arr2"></i><img width="118" height="64"
								src="images/33.jpg" alt="此情" />
							</li>
							<li><i class="arr2"></i><img width="118" height="64"
								src="images/44.jpg" alt="停车" />
							</li>
							<li><i class="arr2"></i><img width="118" height="64"
								src="images/55.jpg" alt="床前" />
							</li>
							<li><i class="arr2"></i><img width="118" height="64"
								src="images/66.jpg" alt="采菊" />
							</li>
						</ul>
					</div>
				</div>
				<script type="text/javascript">
					(function() {

						function G(s) {
							return document.getElementById(s);
						}

						function getStyle(obj, attr) {
							if (obj.currentStyle) {
								return obj.currentStyle[attr];
							} else {
								return getComputedStyle(obj, false)[attr];
							}
						}

						function Animate(obj, json) {
							if (obj.timer) {
								clearInterval(obj.timer);
							}
							obj.timer = setInterval(function() {
								for ( var attr in json) {
									var iCur = parseInt(getStyle(obj, attr));
									iCur = iCur ? iCur : 0;
									var iSpeed = (json[attr] - iCur) / 5;
									iSpeed = iSpeed > 0 ? Math.ceil(iSpeed)
											: Math.floor(iSpeed);
									obj.style[attr] = iCur + iSpeed + 'px';
									if (iCur == json[attr]) {
										clearInterval(obj.timer);
									}
								}
							}, 30);
						}

						var oPic = G("picBox");
						var oList = G("listBox");

						var oPrev = G("prev");
						var oNext = G("next");
						var oPrevTop = G("prevTop");
						var oNextTop = G("nextTop");

						var oPicLi = oPic.getElementsByTagName("li");
						var oListLi = oList.getElementsByTagName("li");
						var len1 = oPicLi.length;
						var len2 = oListLi.length;

						var oPicUl = oPic.getElementsByTagName("ul")[0];
						var oListUl = oList.getElementsByTagName("ul")[0];
						var w1 = oPicLi[0].offsetWidth;
						var w2 = oListLi[0].offsetWidth;

						oPicUl.style.width = w1 * len1 + "px";
						oListUl.style.width = w2 * len2 + "px";

						var index = 0;

						var num = 5;
						var num2 = Math.ceil(num / 2);

						function Change() {

							Animate(oPicUl, {
								left : -index * w1
							});

							if (index < num2) {
								Animate(oListUl, {
									left : 0
								});
							} else if (index + num2 <= len2) {
								Animate(oListUl, {
									left : -(index - num2 + 1) * w2
								});
							} else {
								Animate(oListUl, {
									left : -(len2 - num) * w2
								});
							}

							for ( var i = 0; i < len2; i++) {
								oListLi[i].className = "";
								if (i == index) {
									oListLi[i].className = "on";
								}
							}
						}

						oNextTop.onclick = oNext.onclick = function() {
							index++;
							index = index == len2 ? 0 : index;
							Change();
						}

						oPrevTop.onclick = oPrev.onclick = function() {
							index--;
							index = index == -1 ? len2 - 1 : index;
							Change();
						}

						for ( var i = 0; i < len2; i++) {
							oListLi[i].index = i;
							oListLi[i].onclick = function() {
								index = this.index;
								Change();
							}
						}

					})()
				</script>
			</div>
			<!-- 幻灯片完成 -->
			<c:forEach items="${provinces}" var="p">
				<div id="download" style="float:left;display: inline;padding:10px; ">
					<div style="width:275px;height:420px; background: url(images/prov_1.jpg);">
						<h1>${p.name}省</h1>位于中国${p.direction}。
					</div>
				</div>
				<div style="float:left; width:99.2%;height:300px;border:1px grey solid;">
				<div style="padding:10px;">
					<h3>全省旅游城市</h3>
				</div>
				<div style="padding:10px;">
					<ul>
						<c:forEach items="${p.cities}" var="c">
							<li class="top1" style="float:left;display:inline;padding:15px;">
								<a href="<%=path%>/city/cityDetail.do?id=${c.id}" target="_blank">
									<span class="img"><img
										src="<%=path%>/foreground/${c.images}"
										width="110" height="70"></span> 
									<center>
										<p><span class="num-orange">${c.name}</span></p>
										<p><span class="num-blue">最佳月份：${c.prettyMonth}月</span></p>
									</center>
								</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			</c:forEach>
		</div>

		<div id="footer" style="padding:60px 210px;">
			<div class="nav">
				<ul>
					<li><a href="/service/info_view.aspx?aid=5" target="_blank">关于我们</a>
					</li>
					<li><a href="/service/info_view.aspx?aid=6" target="_blank">广告服务</a>
					</li>
					<li><a href="/service/info_view.aspx?aid=7" target="_blank">联系方式</a>
					</li>
					<li><a href="/service/info_view.aspx?aid=8" target="_blank">网站声明</a>
					</li>
					<li><a href="/service/info_view.aspx?aid=9" target="_blank">诚聘英才</a>
					</li>
					<li><a href="/service/info_view.aspx?aid=10" target="_blank">合作伙伴</a>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
</body>
</html>
